// 1 修改内容 找到元素btn1
let btn1 = document.querySelector('.btn1')
// 给btn1绑定点击事件,修改title的内容
btn1.onclick = function () {
  let title = document.getElementsByClassName('title')[0]
  title.innerHTML = '<h3>hello web32！</h3>' // 标签会解析
  // title.innerText = '<h3>hello web32！</h3>' // 标签不会解析
}

// 2 修改属性 元素:从开始标签开始到结束标签结束包含的所有内容称元素
// 元素的属性：在开始标签中定义的key='value'键值对 class="title" src="./img/lq1.png"
let btn2 = document.querySelector('.btn2')
// add添加 Event事件 listener监听 =  绑定事件监听
btn2.addEventListener(
  'click',
  function () {
    // 找到img元素
    let img = document.querySelector('.img-box>img')
    img.src = './img/lq2.jpg'
    img.width = '200'
  },
  false
)
// 修改元素的属性
let btn4 = document.querySelector('.btn4')
btn4.onclick = function () {
  let input = document.getElementsByClassName('password')[0]
  // 修改text为password
  input.type = 'password'
}

// 3 修改类名
let btn3 = document.querySelector('.btn3')
btn3.addEventListener(
  'click',
  function () {
    let ul = document.querySelector('ul')
    ul.className = 'bd'
    let title = document.getElementsByClassName('title')[0]
    title.className = 'title bd'
  },
  false
)

/*
  事件绑定的三种方式：必须会，熟练使用和定义
  <div onclick="fn()"></div>
  div.onclick=function(){}
  div.addEventListener('click',function(){},false)

  修改内容
    div.innerHTML =''
    div.innerText =''
  修改属性
    img.src = './img/lq2.jpg'
    img.width = '200'
    input.type ='password'
  修改类名
    div.className = 'bd'
*/
